<template>
	<div class="passenger_flow">
		<x-header title="客流分析" :left-options="{backText: '✖'}">
		</x-header>
		<div class="content">
			<div class="tab_time_nav">
				<tab>
					<tab-item :selected="selectIndex===0" @on-item-click="onItemClick">昨日</tab-item>
					<tab-item :selected="selectIndex===1" @on-item-click="onItemClick">近7日</tab-item>
					<tab-item :selected="selectIndex===2" @on-item-click="onItemClick">近30日</tab-item>
				</tab>
			</div>
			<div class="passenger_flow_analysis">
				<div class="common_title">
					<p>客户分析总览</p>
					<p>
						<img src="../../assets/images/statistics/help.jpg" alt="" />
						<span>指标解释</span>
					</p>
				</div>
				<div class="seven_datas">
					<div class="exposure_sum">
						<div class="exposure_sum_1">
							<img src="../../assets/images/statistics/6.png" alt="" />
							<div>
								<p>曝光人数</p>
								<p>较差</p>
							</div>
						</div>
						<div class="exposure_sum_2">
							<p v-if="selectIndex===0">比前日：<span>持平↓</span></p>
							<p v-if="selectIndex===1">比前7日：<span>持平↓</span></p>
							<p v-if="selectIndex===2">比前30日：<span>持平↓</span></p>
							<p>比商圈同行均值：<span>落后↓</span></p>
						</div>
						<div class="exposure_sum_3">
							<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
						</div>
					</div>
					<div class="exposure_sum" style="margin-top: .2rem;">
						<div class="exposure_sum_1">
							<img src="../../assets/images/statistics/6.png" alt="" />
							<div>
								<p>入店转化率</p>
								<p>较差</p>
							</div>
						</div>
						<div class="exposure_sum_2">
							<p v-if="selectIndex===0">比前日：<span>下降一个百分比↓</span></p>
							<p v-if="selectIndex===1">比前7日：<span>下降一个百分比↓</span></p>
							<p v-if="selectIndex===2">比前30日：<span>下降一个百分比↓</span></p>
							<p>比商圈同行均值：<span>落后↓</span></p>
						</div>
						<div class="exposure_sum_3">
							<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
						</div>
					</div>
					<div class="exposure_sum">
						<div class="exposure_sum_1">
							<img src="../../assets/images/statistics/6.png" alt="" />
							<div>
								<p>下单转化率</p>
								<p>较差</p>
							</div>
						</div>
						<div class="exposure_sum_2">
							<p v-if="selectIndex===0">比前日：<span>持平↓</span></p>
							<p v-if="selectIndex===1">比前7日：<span>持平↓</span></p>
							<p v-if="selectIndex===2">比前30日：<span>持平↓</span></p>
							<p>比商圈同行均值：<span>落后↓</span></p>
						</div>
						<div class="exposure_sum_3">
							<img src="../../assets/images/statistics/right_arrow.jpg" alt="" />
						</div>
					</div>
				</div>
				<div class="trend_picture" v-if="selectIndex===1||selectIndex===2">
					<div class="trend_picture_title">客流趋势图</div>
					<div class="trend_picture_nav">
						<tab>
							<tab-item :selected="selectIndex2===0" @on-item-click="onItemClick2">曝光人数</tab-item>
							<tab-item :selected="selectIndex2===1" @on-item-click="onItemClick2">访问人数</tab-item>
							<tab-item :selected="selectIndex2===2" @on-item-click="onItemClick2">下单人数</tab-item>
							<tab-item :selected="selectIndex2===3" @on-item-click="onItemClick2">入店转化率</tab-item>
						</tab>
					</div>
				</div>
				<div class="seven_days_charts" v-if="selectIndex===1">
					<x-chart :id="id" :option="option"></x-chart>
				</div>
				<div class="thirty_days_charts" v-if="selectIndex===2">
					<y-chart :id="id2" :option="option2"></y-chart>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem } from 'vux';
	import XChart from '@/page/statistics/keFlow7';
	import YChart from '@/page/statistics/keFlow30';
	import options from '@/assets/js/ke_flow_7_option';
	import option22 from '@/assets/js/ke_flow_30_option';
	export default {
		name: 'passenger_flow',
		data() {
			let option = options.bar;
			let option2 = option22.bar;
			return {
				id: 'test',
				option: option,
				id2: 'test2',
				option2: option2,
				selectIndex: 0, //0-昨日  1-近7日  2-近30日
				selectIndex2: 0, //0-曝光人数  1-访问人数  2-下单人数  3-入店转化率
			}
		},
		components: {
			XChart,
			YChart,
			XHeader,
			Tab,
			TabItem
		},
		computed: {

		},
		created() {
			this.selectIndex = +this.$route.params.id;
		},
		methods: {
			//时间切换
			onItemClick(value) {
				this.selectIndex = value;
			},
			//曝光人数
			onItemClick2(value) {
				this.selectIndex2 = value;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.passenger_flow {
		.content {
			background: #fff;
			.common_title {
				border-top: .2rem solid #efefef;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: .46rem .24rem;
				p:nth-of-type(1) {
					font-size: .4rem;
					color: #000;
					font-weight: 700;
				}
				p:nth-of-type(2) {
					display: flex;
					align-items: center;
					img {
						width: .28rem;
						height: .28rem;
						margin-right: .1rem;
					}
					span {
						font-size: .3rem;
						color: #9f9f9f;
					}
				}
			}
			.passenger_flow_analysis {
				.seven_datas {
					.exposure_sum {
						width: 95%;
						margin: 0 auto;
						background: #fafafa;
						display: flex;
						justify-content: space-around;
						align-items: center;
						text-align: left;
						padding: .3rem 0;
						.exposure_sum_1 {
							display: flex;
							align-items: center;
							img {
								width: .8rem;
								height: .8rem;
							}
							>div {
								width: 1.5rem;
								p:nth-of-type(1) {
									font-size: .28rem;
									color: #000;
									font-weight: 700;
								}
								p:nth-of-type(2) {
									font-size: .24rem;
									color: #f83f3c;
								}
							}
						}
						.exposure_sum_2 {
							p:nth-of-type(1) {
								width: 3.7rem;
								font-size: .28rem;
								color: #aeaeae;
								span {
									color: #3c3c3c;
								}
							}
							p:nth-of-type(2) {
								font-size: .28rem;
								color: #aeaeae;
								span {
									color: #3c3c3c;
								}
							}
						}
						.exposure_sum_3 {
							display: flex;
							align-items: center;
							img {
								width: .15rem;
								height: .15rem;
							}
						}
					}
				}
				.trend_picture {
					padding: .64rem .3rem;
					.trend_picture_title {
						font-size: .42rem;
						color: #000;
						font-weight: 700;
						text-align: left;
					}
					.trend_picture_nav {
						margin-top: .38rem;
					}
				}
			}
		}
	}
</style>